<template>
	<view>
		<!-- 头部 -->
		<view class="position-relative d-flex a-center" style="height: 320rpx;">
			<!-- 消息列表 -->
			<view class="iconfont icon-liaotianjilu position-absolute text-white"
				style="font-size: 50rpx;top: 75rpx; right:20rpx;z-index: 100;" @click="navigate('msg-list')"></view>
			<image src="../../static/images/bg.jpg" style="width: 100%; height: 320rpx;"></image>
			<view class="d-flex a-center position-absolute left-0 right-0" style="bottom: 50rpx;">
				<image :src="loginStatus ? userInfo.avatar : '../../static/images/demo/demo6.jpg'"
					class="rounded-circle border-light ml-4" style="width: 145rpx;height:145rpx;border: solid 5rpx;">
				</image>
				<view class="ml-2 text-white font-md" @click="openLogin">{{loginStatus ? userInfo.nickname : '登录/注册'}}
				</view>
				<view class="d-flex a-center j-center a-self-end ml-auto px-2"
					style="height: 70rpx;background-color: #FFD43F; color: #CC4A00;border-top-left-radius: 40rpx;border-bottom-left-radius: 40rpx;">
					<view class="line-h iconfont icon-diqiu mr-2">
						会员积分 0.00
					</view>
				</view>
			</view>
		</view>
		<!-- 图标分类 -->
		<card>
			<view slot="title" class="d-flex a-center j-sb w-100">
				<text class="font-md font-weight">我的订单</text>
				<view class="text-secondary font" @click="navigate('order',true)">
					全部订单<text class="iconfont icon-113fangxiang_xiangyou font"></text>
				</view>
			</view>
			<view class="d-flex a-center">
				<view class="flex-1 d-flex a-center j-center flex-column py-3" hover-class="bg-light-secondary"
					v-for="i in 4" :key="i">
					<view class="iconfont icon-navicon-wzgl font-lg line-h "></view>
					<view class="">待付款</view>
				</view>
			</view>
		</card>
		<divider></divider>
		<uni-list-item title="小正会员" :showExtraIcon="true" leftIcon="icon-navicon-wzgl"
			leftIconStyle="color:red;"></uni-list-item>
		<uni-list-item title="小正会员" :showExtraIcon="true" leftIcon="icon-navicon-wzgl"
			leftIconStyle="color:red;"></uni-list-item>
		<uni-list-item title="小正会员" :showExtraIcon="true" leftIcon="icon-navicon-wzgl"
			leftIconStyle="color:red;"></uni-list-item>
		<uni-list-item title="小正会员" :showExtraIcon="true" leftIcon="icon-navicon-wzgl"
			leftIconStyle="color:red;"></uni-list-item>
		<uni-list-item title="小正会员" :showExtraIcon="true" leftIcon="icon-navicon-wzgl"
			leftIconStyle="color:red;"></uni-list-item>
		<divider></divider>
		<uni-list-item title="更多设置" :showExtraIcon="true" leftIcon="icon-navicon-wzgl" leftIconStyle="color:red;"
			@click="navigate('user-set')"></uni-list-item>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	import card from "@/components/common/card.vue"
	export default {
		components: {
			card,
			uniListItem
		},
		data() {
			return {

			}
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			openLogin() {
				if (!this.loginStatus) {
					uni.navigateTo({
						url: '../login/login',
					});
				}
			},
			navigate(path, check = false) {
				if (!path) return;
				if (check) {
					this.navigateTo({
						url: `/pages/${path}/${path}`
					})
				}
				uni.navigateTo({
					url: `/pages/${path}/${path}`
				});

			}
		}
	}
</script>

<style>

</style>